<template>
  <!-- 融资编辑页 -->
  <div>
    <ContainerTitle :text="$route.query.id ? '修改融资' : '新增融资'" class="title"></ContainerTitle>
    <div class="l-title">诉求基本信息</div>
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="100px"
      style="text-align: left"
    >
      <el-form-item label="诉求名称：" prop="appealName">
        <el-input
          v-model.trim="form.appealName"
          placeholder="请输入诉求名称"
          maxlength="20"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="contacts">
        <el-input
          v-model.trim="form.contacts"
          placeholder="请输入联系人"
          maxlength="10"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="contactsTel">
        <el-input
          v-model.trim="form.contactsTel"
          placeholder="请输入联系电话"
          maxlength="13"
        ></el-input>
      </el-form-item>
      <el-form-item label="融资名称：" prop="financingName">
        <el-input
          v-model.trim="form.financingName"
          placeholder="请输入融资名称"
          maxlength="30"
        ></el-input>
      </el-form-item>
      <el-form-item label="融资类型：" prop="financingType">
        <el-select
          v-model.trim="form.financingType"
          placeholder="请选择融资类型"
        >
          <el-option
            v-for="(item, index) in financeFinancingType"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="融资期限：" prop="fDate">
        <el-date-picker
          clearable
          v-model="form.fDate"
          type="daterange"
          :picker-options="pickerOptions"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="融资金额：" prop="financingMoney">
        <el-input
          v-model.trim="form.financingMoney"
          placeholder="请输入融资金额"
          maxlength="10"
        >
          <div slot="append">万元</div>
        </el-input>
      </el-form-item>

      <el-form-item label="融资轮次：" prop="financingTurn">
        <el-select
          v-model.trim="form.financingTurn"
          placeholder="请选择融资轮次"
        >
          <el-option
            v-for="(item, index) in financeFinancingTurn"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="简介：" prop="financingIntroduce">
        <el-input
          :autosize="{ minRows: 4, maxRows: 4 }"
          type="textarea"
          v-model.trim="form.financingIntroduce"
          placeholder="请输入简介"
          maxlength="300"
        ></el-input>
      </el-form-item>

      <el-form-item label="资金用途：" prop="financingPurpose">
        <el-input
          :autosize="{ minRows: 4, maxRows: 4 }"
          type="textarea"
          v-model.trim="form.financingPurpose"
          placeholder="请输入资金用途"
          maxlength="100"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="担保方式：" prop="guaranteeType">
        <el-input
          v-model.trim="form.guaranteeType"
          placeholder="请输入担保方式"
          maxlength="30"
        ></el-input>
      </el-form-item> -->

      <el-form-item label="担保方式" prop="guaranteeType">
        <el-select
          v-model.trim="form.guaranteeType"
          placeholder="请选择担保方式"
        >
          <el-option
            v-for="statusItem in financeGuaranteeOptions"
            :key="statusItem.dictValue"
            :label="statusItem.dictLabel"
            :value="statusItem.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="财务状况：" prop="financeStatus">
        <el-select
          v-model.trim="form.financeStatus"
          placeholder="请选择财务状况"
        >
          <el-option
            v-for="(item, index) in financeComFinanceStatus"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="融资期望：" prop="financingExpect">
        <el-input
          v-model.trim="form.financingExpect"
          placeholder="请输入融资期望"
          maxlength="30"
        ></el-input>
      </el-form-item>

      <el-form-item label="企业标签：" prop="companyTag">
        <div class="promptspan">
          输入标签自定义最多5个(标签长度不能超10)
        </div>
        <el-select
          v-model="form.companyTag"
          multiple
          filterable
          allow-create
          default-first-option
          :multiple-limit="5"
          placeholder="请输入企业标签"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="公司官网：">
        <el-input
          style="margin-right: 50px"
          v-model.trim="form.officialWebsite"
          placeholder="请输入"
          :maxlength="500"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="公司地址：">
        <el-cascader
          ref="casArea"
          v-model.trim="areaValue"
          :options="areaData"
          @change="handleTreeChange"
          :props="{
            value: 'id',
          }"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="">
        <el-input
          style="width: 370px"
          v-model.trim="form.detailedAddress"
          placeholder="请输入详细地址"
        ></el-input>
      </el-form-item> -->

      <el-form-item label="项目描述：">
        <el-select
          style="margin-right: 300px"
          v-model.trim="form.describeType"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in financeDescribeType"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-input
          style="width: 508px; height: 100px; margin-left: 100px"
          placeholder="请输入详细描述"
          type="textarea"
          resize="none"
          :maxlength="500"
          :autosize="{ minRows: 4, maxRows: 4 }"
          v-model.trim="form.projectDescribe"
          :show-word-limit="true"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="l-title">项目详情</div>
    <div style="text-align: left" class="editor-box">
      <editor
        v-model.trim="form.projectDetails"
        :min-height="192"
        @on-change="handleTextChange"
      />
      <span class="wordlimit">{{ descriptionText.length }}/500</span>
    </div>
    <div class="btn-bottom">
      <Buttons :buttons="buttons" @goBack="goBack" @save="save" @apply="apply"></Buttons>
    </div>
  </div>
</template>
<script>
import Editor from "@/components/Editor";
import financingEditRules from "@/formRules/financial/financingEditRules.js";
import { getMyFinancingDetails, getArea, updateFinancing, addFinancing } from "@/common/api/company.js";
export default {
  components: {
    Editor,
  },
  mixins: [financingEditRules],
  data() {
    return {
      buttons:[
        { text: "取消", type: "normal", size: "l", method: "goBack" },
        { text: "保存", type: "success", size: "l", method: "save" },
        { text: "申请", type: "success", size: "l", method: "apply" },
      ],
      name: "finance",
      id: "", // id值，判断新增还是编辑
      // crumbs: [
      //   {
      //     label: "企业空间",
      //     value: "company",
      //   },
      //   {
      //     label: "金融服务",
      //     value: "",
      //   },
      //   {
      //     label: "我的融资",
      //     value: "myFinancing",
      //   },
      // ],
      pickerOptions: {
        disabledDate: (time) => time.getTime() < Date.now() - 8.64e7,
      },
      files: [],
      areaValue: [],
      areaData: [],
      // 各项下拉选择
      financeFinancingType: [],
      financeFinancingTurn: [],
      financeDescribeType: [],
      financeComFinanceStatus: [],
      descriptionText: "",
      options: [],
      financeGuaranteeOptions: [],
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getEditData(this.id);
      // this.crumbs.push({
      //   label: "修改融资",
      //   choose: true,
      // });
    } else {
      // this.crumbs.push({
      //   label: "新增融资",
      //   choose: true,
      // });
    }
    this.getArea();
    this.getFinanceTypeList();
  },
  methods: {
    async getFinanceTypeList() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`finance_guarantee_way,finance_financing_type,finance_financing_turn,finance_describe_type,finance_com_finance_status`).then(res => {
        this.financeGuaranteeOptions = res.finance_guarantee_way;
        this.financeFinancingType = res.finance_financing_type;
        this.financeFinancingTurn = res.finance_financing_turn;
        this.financeDescribeType = res.finance_describe_type;
        this.financeComFinanceStatus = res.finance_com_finance_status;
      })
    },
    async getEditData(id) {
      let res = await getMyFinancingDetails(id);
      if (res.code == 200) {
        this.form = res.data.companyFinancing;
        // 融资期限回显
        // this.form.fDate = []
        // this.form.fDate.push(this.form.startTimeStr)
        // this.form.fDate.push(this.form.endTimeStr)
        this.$set(this.form, "fDate", [
          this.form.startTimeStr,
          this.form.endTimeStr,
        ]);
        // 公司地址回显
        this.areaValue = [
          parseInt(this.form.provinceCode),
          parseInt(this.form.cityCode),
          parseInt(this.form.countyCode),
        ];
        // 企业标签回显
        this.form.companyTag = this.form.companyTag.split(",");
      }
    },
    // 地区数据
    async getArea() {
      let res = await getArea();
      if (res.code == 200) {
        this.areaData = res.data;
      }
    },
    handleTreeChange(e) {
      this.form.provinceCode = e[0];
      this.form.cityCode = e[1];
      this.form.countyCode = e[2];
    },
    /**
     * 富文本触发
     * @param obj 上传文件数据
     * @return {void}
     */
    handleTextChange(obj) {
      const { html, text, quill } = obj;
      let value = quill.getText();
      let trimLength = value.trim().length;
      if (value.length > trimLength) {
        quill.deleteText(trimLength, value.length);
        if (trimLength > 500) {
          quill.deleteText(500, trimLength);
        }
      }
      this.descriptionText = quill.getText().trim();
    },
    // 保存
    save() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.$confirm("您确定做此次操作，保存本次数据，不申请？", "", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            callback: async (action) => {
              action == "confirm" && this.submit(0);
            },
          });
        } else {
          this.$message({
            type: "warning",
            message: "请正确填写内容",
          });
        }
      });
    },
    // 申请
    apply() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.$confirm(
            "您确定做此次操作，申请之后将进入下一阶段，并无法取消",
            "",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              callback: (action) => {
                action == "confirm" && this.submit(1);
              },
            }
          );
        } else {
          this.$message({
            type: "warning",
            message: "请正确填写内容",
          });
        }
      });
    },
    async submit(type) {
      // 把时间赋值
      this.form.startTimeStr = this.form.fDate[0];
      this.form.endTimeStr = this.form.fDate[1];
      // 保存还是申请
      this.form.financingStatus = type;
      // 企业标签转字符
      this.form.companyTag = this.form.companyTag.join(",");

      let res = null;
      if (this.id) {
        this.form.id = this.form.companyFinancingId;
        res = await updateFinancing(this.form);
      } else {
        res = await addFinancing(this.form);
      }
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: type == 0 ? "保存成功" : "申请成功",
        });
        this.goBack();
      } else {
        this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    /**
     * 返回上一页
     */
    goBack: function () {
      // console.log(this.form)
      this.$router.back();
    },
  },
};
</script>
<style scoped>
::v-deep .el-input {
  width: 286px;
}
::v-deep .el-textarea {
  width: 286px;
}
.el-form ::v-deep .el-date-editor {
  width: 286px !important;
}
.promptspan {
  font-size: 12px;
  color: #bbbbbb;
  position: absolute;
  top: -30px;
  left: 0;
}
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}

.l-title {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  text-align: left;
  background: #f1f2f4;
  padding: 12px 20px;
  margin-bottom: 24px;
}
.editor-box {
  position: relative;
}
.wordlimit {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}
.uploadBtn {
  background-color: #f1f2f4;
  color: #045db9;
  border-width: 0;
}
.deleteBtn {
  font-size: 20px;
  color: #d00000;
  font-weight: bold;
  margin-left: 10px;
}
.btn-bottom {
  text-align: center;
  margin: 40px 0 150px;
}
.btn-bottom .cancelBtn {
  border: 1px solid #eeeeee;
  display: inline-block;
  font-size: 14px;
  padding: 10px 46px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
}
.btn-bottom .cancelBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}
.btn-bottom .sendBtn {
  padding: 10px 46px;
  background-color: #045db9;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
  transition: all 0.2s ease 0s;
  margin-right: 10px;
}
.btn-bottom .sendBtn:hover {
  box-shadow: 0px 5px 5px #e1e1e1;
  cursor: pointer;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>